<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/common.js"></script>
    <script type="text/javascript" th:inline="javascript">
    </script>
    <style>
        /*注册页面*/
        .container {
            border: 1px solid rgba(255, 255, 255, 0.3);
            margin-top: 100px;
            width: 50%;

            margin-left: 50px;

        }

        body {
            background-image: url("http://localhost:8088/images/201910280135559857.jpg");
        }

        #l1, #l2, #l3, #l4 {
            color: white;
        }


    </style>
</head>
<body>
<div class="container">
    <div class="" style="width:50%; height: 60px;padding-top: 1px;">
        <h2 align="center" style="color: white;font-size: 25px">用户注册</h2>
    </div>
    <br><br>
    <form name="myform" method="post" id="tab-reg" class="form-horizontal" role="form">
        <div class="form-group has-success">
            <label class="col-sm-2 col-md-2 control-label" id="l1">邮箱</label>
            <div class="col-sm-4 col-md-4">
                <table style="width:100%">
                    <tr>
                        <td><input type="email" id="email" name="email" class="form-control"
                                   placeholder="请输入您的邮箱"
                        /></td>
                        <td>
                            <span id="isExit"></span>
                        </td>
                    </tr>
                </table>
                <span></span>
            </div>
        </div>

        <div class="form-group has-success">
            <label class="col-sm-2 col-md-2 control-label" id="l2">密码</label>
            <div class="col-sm-4 col-md-4">
                <input type="password" id="password" name="password" class="form-control"
                       placeholder="请输入您的密码"/>
                <span></span>
            </div>
        </div>

        <div class="form-group has-success">
            <label class="col-sm-2 col-md-2 control-label" id="l3">确认密码</label>
            <div class="col-sm-4 col-md-4">
                <input type="password" name="comfirmPwd" id="comfirmPwd" class="form-control"
                       placeholder="请输入您的密码"/>
            </div>
        </div>
        <div class="form-group has-success">
            <label class="col-sm-2 col-md-2 control-label" id="l4">验证码</label>
            <div class="col-sm-2 col-md-2">
                <input type="text" class="form-control" name="code" id="code"
                       placeholder="请输入验证码" th:maxlength="6"/>
            </div>
            <div class="col-sm-2 col-md-2">
                <input type="button" id="emailBtn" class="btn btn-primary" value="发送邮件">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-success" id="register">注册</button>
                <button type="reset" class="btn btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>


<script>
    //注册按钮点击事件
    $("#register").click(function () {
        var email = $("#email").val();
        var password = $("#password").val();
        var comfirmPwd = $("#comfirmPwd").val();
        var code = $("#code").val();
        var param =
            {"email": email, "password": password, "comfirmPwd": comfirmPwd, "code": code};
        $.post("/user/doReg", param, function (data) {
            if (data.state == 200) {
                alert(data.message);
                location.href = "/user/toLogin";
            } else {
                alert(data.message);
            }
        }, "json");
    });

    //给id=emailBtn的元素添加一个点击事件
    $("#emailBtn").click(function () {
        //发送邮箱
        var email = $("#email").val();
        if (null == email || "" == email) {
            alert("邮箱必填");
            return
        }
        //发生ajax
        $.getJSON("/user/sendEmail", {"email": email}, function (data) {
            alert(data.message);
        })
    });
    //给id=email的输入框添加一个失去焦点事件
    $("#email").blur(function () {
        //获取邮箱
        let email = $("#email").val();
        //ajax请求
        $.post("/user/checkedEmail", {"email": email}, function (data) {
            if (data.state == 200) {
                alert(data.message)
            } else {
                alert(data.message)
            }
        }, "json");
    });
</script>
</html>